<template>
  <div>
    <el-form label-width="80px" style="height:508px">
      <el-row>
        <el-col :span="24" style="margin:5px 0">
          <el-button @click="previousPage" style="float:right; " type="success" plain icon="el-icon-arrow-left">返回
          </el-button>
        </el-col>
        <el-col :span="14">
          <el-form-item label="用户名">
            <el-input v-model.trim="name" placeholder="请输入用户名" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22" style="margin:5px 0">
          <el-button type="primary" @click="addtableClick" style="float:right">新增</el-button>
        </el-col>
        <el-col :span="22">
          <el-table :data="tableData" border style="width: 100%" height="180">
            <el-table-column prop="IsAlarm" label="类型">
              <template slot-scope="scope">
                <span>{{scope.row.IsAlarm=='0'?"探测地址":"报警地址"}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Name" label="名称">
            </el-table-column>
            <el-table-column prop="Ip" label="IP地址">
            </el-table-column>
            <el-table-column prop="Port" label="端口号">
            </el-table-column>
            <el-table-column prop="Comment" label="描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="editRow(scope.$index,scope.row)" type="text" size="small">
                  编辑
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="22" style="margin:5px 0">
          <el-button type="primary" @click="RegionAlarmClick" style="float:right">新增</el-button>
        </el-col>
        <el-col :span="22">
          <el-table :data="RegionAlarm" border style="width: 100%" height="180">
            <el-table-column prop="RegionName" label="名称">
            </el-table-column>
            <el-table-column prop="RegionIp" label="IP地址">
            </el-table-column>
            <el-table-column prop="RegionPort" label="端口号">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button @click.native.prevent="RegioneditRow(scope.$index,scope.row)" type="text" size="small">
                  编辑
                </el-button>
                <el-button @click.native.prevent="RegiondeleteRow(scope.$index, RegionAlarm)" type="text" size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="65%" @closed="handleClose">

      <el-form label-position="right" label-width="80px" :model="tableform" ref="tableform" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="IsAlarm">
              <el-select v-model="tableform.IsAlarm" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="Name">
              <el-input v-model="tableform.Name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ip地址" prop="Ip">
              <el-input v-model="tableform.Ip"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="端口号" prop="Port">
              <el-input v-model="tableform.Port"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="Comment">
              <el-input v-model="tableform.Comment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <el-dialog :title="Regiondialogtitle" :visible.sync="RegionVisible" width="65%" @closed="RegionhandleClose">
      <el-row>
        <el-form label-position="right" label-width="80px" :model="Regionform" ref="Regionform">

          <el-col :span="12">
            <el-form-item label="名称" prop="RegionName">
              <el-input v-model="Regionform.RegionName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="RegionIp">
              <el-input v-model="Regionform.RegionIp"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ip地址" prop="RegionPort">
              <el-input v-model="Regionform.RegionPort"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="20">
            <el-form-item>
              <el-button type="primary" @click="RegionSubmit">立即创建</el-button>
              <el-button @click="RegionVisible=false">取消</el-button>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
    </el-dialog>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addTerminal">提 交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </span>
  </div>
</template>

<script>

export default {
  name: "mabDevice",
  data() {
    return {
      dialogVisible: false,
      dialogtitle: "",
      name: {},
      tableData: [],
      tabindex: "",//第一个列表需要的下标
      tableform: {
        Comment: '',
        Ip: '',
        IsAlarm: '',
        Name: '',
        Port: '',
      },
      RegionAlarm: [],
      Regiondialogtitle: "",
      RegionVisible: false,
      Regionform: {
        RegionName: '',
        RegionIp: '',
        RegionPort: '',
      },
      Regionindex: "",//第二个列表需要的下标
      options: [{
        value: '0',
        label: '探测地址'
      }, {
        value: '1',
        label: '报警地址'
      }],
      rowData: {},
      rules: {
        IsAlarm: [{ required: true, trigger: "change", message: "请选择类型" }],
        Ip: [{ required: true, trigger: "blur", message: "请输入IP" }],
        Name: [{ required: true, trigger: "blur", message: "请输入名称" }],
        Port: [{ required: true, trigger: "blur", message: "请输入端口号" }],
        Comment: [{ required: true, trigger: "blur", message: "请输入描述信息" }],
      },

    }
  },
  created() {
    this.getRootDevList()
  },
  methods: {
    //返回上一页
    previousPage() {
      this.$router.go(-1)
    },
    getRootDevList() {
      this.rowData = this.$route.params
      this.name = this.$route.params.name
      if (this.$route.params.Root.AlarmList.AlarmInfo == null) {
        this.tableData = []
      } else {
        this.tableData = this.$route.params.Root.AlarmList.AlarmInfo
      }
      if (this.$route.params.Root.RegionAlarmList.RegionAlarm == null) {
        this.RegionAlarm = []
      } else {
        this.RegionAlarm = this.$route.params.Root.RegionAlarmList.RegionAlarm
      }


      console.log(this.$route.params.Root.RegionAlarmList);
    },
    //删除按钮
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //新增按钮
    addtableClick() {
      this.dialogtitle = "新增"
      this.dialogVisible = true
    },
    //编辑
    editRow(index, row) {
      this.dialogtitle = "编辑"
      this.dialogVisible = true
      console.log(index, "index");
      console.log(row, "row");
      this.tableform = JSON.parse(JSON.stringify(row))
      this.tabindex = index
    },
    //取消按钮
    handleClose() {
      this.tableform = {
        Comment: '',
        Ip: '',
        IsAlarm: '',
        Name: '',
        Port: '',
      }
      this.dialogVisible = false
    },
    //页面提交
    onSubmit() {
      if (this.dialogtitle == "编辑") {
        this.$set(this.tableData, this.tabindex, this.tableform);
      } else if (this.dialogtitle == "新增") {
        this.tableData.push(this.tableform)
      }
      this.$message({
        type: "success",
        message: "提交成功！",
      });
      this.dialogVisible = false
    },
    //确 定
    addTerminal() {
      this.$confirm("确认要提交吗？", "提示", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {
          this.rowData.name = this.name
          this.rowData.Root.AlarmList.AlarmInfo = this.tableData
          this.rowData.Root.RegionAlarmList.RegionAlarm = this.RegionAlarm
          console.log(this.rowData, "3");
          this.$postForJson('3in1/policy/violation', this.rowData).then(jsonData => {
            console.log(jsonData, "sss");
            this.$message({
              type: "success",
              message: "提交成功！",
            });
            this.$router.go(-1)
          })


        })
        .catch((_) => {
          this.$message({
            type: 'info',
            message: '已取消提交'
          });


        });
    },
    //重置
    resetForm() {
      this.$confirm("确认要重置吗？", "提示", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "重置成功！",
          });
        })
        .catch((_) => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          });
        });
    },
    //新增
    RegionAlarmClick() {
      this.Regiondialogtitle = "新增"
      this.RegionVisible = true
    },
    //编辑
    RegioneditRow(index, row) {
      this.Regiondialogtitle = "编辑"
      this.RegionVisible = true
      this.Regionform = JSON.parse(JSON.stringify(row))
      this.Regionindex = index
    },
    RegiondeleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //立即创建
    RegionSubmit() {
      if (this.Regiondialogtitle == "新增") {
        this.RegionAlarm.push(this.Regionform)
        console.log(this.RegionAlarm);
      } else if (this.Regiondialogtitle == "编辑") {
        this.RegionAlarm[this.Regionindex] = this.Regionform
        this.$set(this.RegionAlarm, this.Regionindex, this.Regionform);
      }
      this.$message({
        type: "success",
        message: "提交成功！",
      });
      this.RegionVisible = false
    },
    RegionhandleClose() {
      this.Regionform = {
        RegionName: '',
        RegionIp: '',
        RegionPort: '',
      }
      this.RegionVisible = false
    }
  }

}
</script>

<style scoped>
.el-form-item__content {
  margin-left: 90px !important;
}
</style>